import React, { Component,Fragment } from 'react';
import {Card,Tabs,message,Icon} from 'antd'
import './ui.less'
export default class Tab extends Component {
    constructor(props) {
        super(props)
        this.newTabIndex = 0
        this.state = {
            activeKey:1,
            panes:[]
        }
    }
    componentWillMount() {
        const panes= [
            { title: 'Tab 1', content: 'Content of Tab 1', key: '1' },
            { title: 'Tab 2', content: 'Content of Tab 2', key: '2' },
            { title: 'Tab 3', content: 'Content of Tab 3', key: '3' },
        ]
        this.setState({
            activeKey:panes[0].key,
            panes
        })
    }
    
    handleChange = (activeKey) => {
        message.info('你选择了第'+activeKey+'个tab')
        this.setState({activeKey})
    }
    handleEdit = (targetKey,action) => {
        this[action](targetKey)
    }
    add = () => {
        const panes = this.state.panes;
        //添加之后，当前tab为新添加的tab
        const activeKey=`新标签${this.newTabIndex++}`
        panes.push({title:`新标签${this.newTabIndex++}`,content:`新内容${this.newTabIndex++}`,key:activeKey})
        //更新数据
        this.setState({
            panes,
            activeKey
        })
    }
    remove=(targetKey) => {
        let activeKey = this.state.activeKey
        let lastIndex;
        //主要难点是判断激活的页面是哪一个（即active）
        this.state.panes.forEach((pane,i) => {
            //当要删除的标签是正打开的标签，要改变删除后谁要激活
            if(pane.key === targetKey) {
                //有个临界值-1
                lastIndex = i-1
            }
        });
        
        //更新数据 去除掉要删除的数据
        const panes = this.state.panes.filter(pane =>pane.key!==targetKey)
        if(lastIndex >=0 && activeKey === targetKey ){
            
            activeKey=panes[lastIndex].key
        }
        //删除第一个标签时且第一个本来时激活状态，则跳到原来的第二个标签(即删除后的第一个标签)
        if(lastIndex<0 && activeKey === targetKey) {
            activeKey=panes[0].key
        }
        this.setState({
            panes,
            activeKey
        })
    }
    render() {
        return (
            <Fragment>
                <Card title="Tab页签" className="card-wrapper">
                    <Tabs defaultActiveKey="1" onChange={this.handleChange}>
                        <Tabs.TabPane key="1" tab="Tab1">欢迎学习React课程</Tabs.TabPane>
                        <Tabs.TabPane key="2" tab="Tab2" disabled>欢迎学习React课程</Tabs.TabPane>
                        <Tabs.TabPane key="3" tab="Tab3">React是一门非常受欢迎的MV*框架</Tabs.TabPane>
                    </Tabs>
                </Card>
                <Card title="Tab带图标页签" className="card-wrapper">
                    <Tabs defaultActiveKey="1" onChange={this.handleChange}>
                        <Tabs.TabPane key="1" tab={<span><Icon type='plus'/>tab1</span>}>欢迎学习React课程</Tabs.TabPane>
                        <Tabs.TabPane key="2" tab={<span><Icon type='edit'/>tab2</span>}>欢迎学习React课程</Tabs.TabPane>
                        <Tabs.TabPane key="3" tab={<span><Icon type='delete'/>tab3</span>}>React是一门非常受欢迎的MV*框架</Tabs.TabPane>
                    </Tabs>
                </Card>
                <Card title="Tab可关闭卡片式页签" className="card-wrapper">
                    <Tabs activeKey={this.state.activeKey} onChange={this.handleChange} type="editable-card" onEdit={this.handleEdit}>
                        {this.state.panes.map(pane => <Tabs.TabPane tab={pane.title} key={pane.key}>{pane.content}</Tabs.TabPane>)}
                    </Tabs>
                </Card>
            </Fragment>
        )
    }
}